<template>
  <div class="projectDetails">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- ========== -->
      <el-tab-pane label="总览" name="first">
        <!-- 账单条 -->
        <div class="project_bill clearfix">
          <div class="total">
            <span>合同总金额（万）</span>
            <h2>￥{{ projectBill.total }}</h2>
          </div>
          <div class="cost">
            <span>成本支出（万）</span>
            <h2>￥{{ projectBill.cost }}</h2>
          </div>
          <div class="recovery">
            <span>回款总金额（万）</span>
            <h2>￥{{ projectBill.recovery }}</h2>
          </div>
          <div class="recovery_rate">
            <span>回款率(%)</span>
            <h2>{{ projectBill.recovery_rate }}</h2>
          </div>
        </div>
        <!-- 饼图 -->
        <div class="pie">
          <!-- 回款统计 饼图 -->
          <div
            class="recovery_statistics_echarts"
            ref="recovery_statistics_echarts"
            style="width: 500px; height: 500px; border: 1px solid"
          ></div>
          <!-- 成本分析 饼图 -->
          <div
            class="cost_analyse_echarts"
            ref="cost_analyse_echarts"
            style="width: 500px; height: 500px; border: 1px solid"
          ></div>
        </div>
        <!-- 付款统计 横向柱形图-->
        <div class="payment">
          <div
            class="payment_echarts"
            ref="payment_echarts"
            style="width: 500px; height: 500px; border: 1px solid"
          ></div>
        </div>
      </el-tab-pane>
      <!-- ========== -->

      <el-tab-pane label="简介" name="second">简介</el-tab-pane>
      <!-- ========== -->

      <el-tab-pane label="计划" name="third">计划</el-tab-pane>
      <!-- ========== -->

      <el-tab-pane label="进度" name="fourth">进度</el-tab-pane>
      <el-tab-pane label="任务" name="fifth">任务</el-tab-pane>
      <el-tab-pane label="合同" name="sixth">合同</el-tab-pane>
      <el-tab-pane label="日报" name="seventh">日报</el-tab-pane>
      <el-tab-pane label="合同" name="eighth">合同</el-tab-pane>
      <el-tab-pane label="收货记录" name="ninth">收货记录</el-tab-pane>
      <el-tab-pane label="结算管理" name="tenth">结算管理</el-tab-pane>
      <el-tab-pane label="云盘" name="eleventh">云盘</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// import * as echarts from "echarts";
export default {
  data() {
    return {
      activeName: "first",
      projectBill: {
        total: 1,
        cost: 2,
        recovery: 3,
        recovery_rate: "4%",
      },

      // 付款统计柱状图数据
      payment_echarts_data: [
        { name: "材料采购合同A", paid: 500, willPay: 300 },
        { name: "劳务合同A", paid: 500, willPay: 300 },
        { name: "劳务合同A", paid: 500, willPay: 300 },
        { name: "劳务合同A", paid: 500, willPay: 300 },
        { name: "劳务合同A", paid: 500, willPay: 300 },
        { name: "劳务合同A", paid: 500, willPay: 300 },
      ],
      payment_echarts_yData: [
        // { name: "材料采购合同A"},
        // { name: "劳务合同A" },
        // { name: "临时付款" },
        // { name: "材料采购合同B" },
        // { name: "劳动合同B" },
        // { name: "家庭清洁" }
      ],
      payment_echarts_paid: [
        // 512, 139, 900, 200, 100, 50
      ],
      payment_echarts_willPay: [
        // 123, 123, 123, 123, 123, 213
      ],
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },

    //回款统计饼图
    recovery_statistics_echarts() {
      let myChart = this.$echarts.init(this.$refs.recovery_statistics_echarts);
      myChart.setOption({});
    },
    //成本分析饼图
    cost_analyse_echarts() {
      let myChart = this.$echarts.init(this.$refs.cost_analyse_echarts);
      myChart.setOption({});
    },
    // 付款统计柱状图
    payment_echarts() {
      // console.log(this.payment_echarts_data[0].name);

      for (let i = 0; i < this.payment_echarts_data.length; i++) {
        this.payment_echarts_yData.push(this.payment_echarts_data[i].name);
        this.payment_echarts_paid.push(this.payment_echarts_data[i].paid);
        this.payment_echarts_willPay.push(this.payment_echarts_data[i].willPay);
      }

      let myChart = this.$echarts.init(this.$refs.payment_echarts);
      myChart.setOption({
        tooltip: {
          title: {
            text: ["付款统计"],
          },
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: this.payment_echarts_yData,
        },
        series: [
          {
            name: "已付款",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: this.payment_echarts_paid,
          },
          {
            name: "待付款",
            type: "bar",
            stack: "total",
            label: {
              show: true,
            },
            emphasis: {
              focus: "series",
            },
            data: this.payment_echarts_willPay,
          },
        ],
      });
    },
  },

  mounted() {
    this.payment_echarts();
  },
};
</script>

<style>
</style>